<template>
  <view class="reply page pd-30">
    <view class="card1 pd-12">
      <view class="mt-24 flex-bwt1">
        <view class="identity flex">
          <view style="position: relative">
            <image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1" :src="detailInfo.user_info?.avatar">
            </image>
            <image class="wh-28 mr-12"
              v-if="detailInfo.user_info?.sale_info && detailInfo.user_info?.sale_info?.is_official === 1" style="
                border-radius: 50%;
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 3;
              " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
          </view>
          <view class="desc ml-20">
            <view class="ft1 flex">{{ detailInfo.user_info?.nickname }}
              <view class="nameplate ml-20 ft ft-20 c-dbf" v-if="detailInfo.user_info?.level_info?.id > 1"
                style="flex-shrink: 0;">
                {{ detailInfo.user_info?.level_info?.name }}
              </view>

            </view>
            <view class="ft mt-12 ft-20 c-99">{{
              detailInfo.ip_location + " | " + detailInfo.created_at
            }}</view>
          </view>
        </view>
        <view class="positionBox">
          <image @click="isMore = !isMore" style="
              z-index: 1;
              width: 74rpx;
              height: 42rpx;
              margin-bottom: 30rpx;
            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
          <view v-if="isMore" class="box pd-20">
            <view v-if="detailInfo.is_my === 0" class="ft c-33 flex-center" @click="goReport(detailInfo.id)">举报
            </view>
            <view v-else class="ft c-33  flex-center" @click="show = true">删除</view>
          </view>
        </view>
      </view>
      <view class="ft mt-12 ml-102">{{
        detailInfo.name
      }}</view>
    </view>
    <view class="asd pd-20 mt-24 flex-bwt" v-if="detailInfo.like_list && detailInfo.like_list.length > 0">
      <view class="avtors flex">
        <view style="position: relative" v-for="(item, index) in detailInfo.like_list" :key="index">
          <image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1" :src="item.avatar"></image>
          <image class="wh-28 mr-12" style="
              border-radius: 50%;
              position: absolute;
              right: 0;
              bottom: 0;
              z-index: 3;
            " src="https://cdn.oss.bon-top.cn/static_bc/images/thumbs.png"></image>
        </view>
      </view>

      <text class="ft c-99">{{
        detailInfo.like_list.length + "人点赞了"
      }}</text>
    </view>
    <view class="caseBox mb-250 mt-30 pd-20" v-if="detailInfo.replys && detailInfo.replys.length > 0">
      <view class="ft c-99">{{ detailInfo.replys.length + "条回复" }}</view>
      <view class="caseCard" v-for="(item) in detailInfo.replys" :key="item.id">
        <view class="mt-24 flex-bwt1">
          <view class="identity flex">
            <view style="position: relative">

              <image v-if="item.user_info && item.user_info?.avatar" class="wh-72 mr-12"
                style="border-radius: 50%; z-index: 1" :src="item.user_info?.avatar"></image>
              <image v-else class="wh-72 mr-12" style="border-radius: 50%; z-index: 1"
                src="https://bontop.oss-accelerate.aliyuncs.com//resource/cb2f3c7a493aad3c16d3f257481e4687_220617150724_1243546703.png">
              </image>
              <image v-if="item.user_info?.sale_info && item.user_info?.sale_info.is_official === 1" class="wh-28 mr-12"
                style="
                  border-radius: 50%;
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  z-index: 3;
                " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
            </view>
            <view class="desc ml-20">
              <view class="ft1 flex">{{ item.user_info?.nickname }}
                <view class="nameplate ml-20 ft ft-20 c-dbf" v-if="item.user_info?.level_info?.id > 1"
                  style="flex-shrink: 0;">
                  {{ item.user_info?.level_info?.name }}
                </view>

              </view>
              <view class="ft mt-12 ft-20 c-99">{{
                item.ip_location + " | " + item.created_at
              }}</view>
            </view>
          </view>

          <view class="positionBox">
            <image @click="showRoport(item)" style="
              z-index: 1;
              width: 74rpx;
              height: 42rpx;
              margin-bottom: 30rpx;
            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
            <view v-if="item.isMore" class="box pd-20">
              <view v-if="detailInfo.is_my === 0" class="ft c-33 flex-center" @click="goReport(item.id)">举报
              </view>
              <view v-else class="ft c-33 flex-center" @click="isDelete(item.id)">删除</view>
            </view>
          </view>

        </view>
        <view class="ft mt-12 ml-102" @click="openInput(item.user_info.nickname, item.id)">{{
          item.name
        }}</view>
        <view class="combination flex-eve ft mt-12 ml-102">
          <view class="flex-center" @click="openInput(item.user_info.nickname, item.id)">
            <image class="wh-24 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
            <text class="ft">{{ item.children.length }}</text>
          </view>
          <text>|</text>
          <view class="flex-center" @click="handleZan(item.id, item.is_like, item)">
            <image v-if="item.is_like === 1" class="wh-24 mr-12"
              src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
            <image v-if="item.is_like === 0" class="wh-24 mr-12"
              src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
            <text class="ft">{{ item.like_num }}</text>
          </view>
        </view>
        <view class="nextCase pd-20 mt-12 ml-102" v-if="item.children && item.children.length > 0">
          <view class="mt-20" v-for="child in item.children" :key="child.id">
            <view class="flex-bwt1">
              <view class="identity flex">
                <view style="position: relative">
                  <image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1" :src="child.user_info.avatar">
                  </image>
                  <!-- <image class="wh-28 mr-12" style="border-radius: 50%; position: absolute; right: 0; bottom: 0; z-index: 3;" src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image> -->
                </view>
                <view class="desc ml-20">
                  <view v-if="child.parent_id && child.p_info" class="ft1 ft-24 c-33 flex"
                    style="flex-wrap: wrap;gap: 4rpx 0; ">
                    <!-- {{ child.user_info.nickname + " 回复：" + child.p_info.p_name }} -->
                    <text>{{ child.user_info.nickname }}</text>
                    <view class="nameplate ml-20 ft ft-20 c-dbf" v-if="child.user_info?.level_info?.id > 1"
                      style="flex-shrink: 0;">
                      {{ child.user_info?.level_info?.name }}
                    </view>
                    <text style="margin: 0 10rpx;"> 回复：</text>
                    <text>{{ child.p_info.p_name }}</text>
                    <view class="nameplate ml-20 ft ft-20 c-dbf" v-if="child.p_info?.level_info?.id > 1"
                      style="flex-shrink: 0;">
                      {{ child.p_info?.level_info?.name }}
                    </view>

                  </view>
                  <view v-else class="ft1 ft-24 c-33">{{ child.user_info.nickname }}</view>
                  <view class="ft mt-12 ft-20 c-99">{{
                    child.ip_location + " | " + child.created_at
                    }}</view>
                </view>
              </view>
              <view class="positionBox">
                <image @click="showRoport(child)" style="
              z-index: 1;
              width: 74rpx;
              height: 42rpx;
              margin-bottom: 30rpx;
            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
                <view v-if="child.isMore" class="box pd-20">
                  <view v-if="child.is_my === 0" class="ft c-33 flex-center" @click="goReport(child.id)">举报
                  </view>
                  <view v-else class="ft c-33  flex-center" @click="isDelete(child.id)">删除</view>
                </view>
              </view>

            </view>
            <view class="ft mt-12 ml-102" @click="openInput(child.user_info.nickname, child.id)">{{
              child.name
            }}</view>
            <view class="combination flex-eve ft ml-102">
              <view class="flex-center" @click="openInput(child.user_info.nickname, child.id)">
                <image class="wh-24 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
                <!-- <view v-if="child.children&&child.children.length>0">
                <text class="ft">{{child.reply_num  }}</text>
              </view> -->
                <text class="ft">{{ child.reply_num }}</text>
              </view>
              <text>|</text>
              <view class="flex-center" @click="handleZan(child.id, child.is_like, child)">
                <image v-if="child.is_like === 1" class="wh-24 mr-12"
                  src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
                <image v-if="child.is_like === 0" class="wh-24 mr-12"
                  src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
                <text class="ft">{{ child.like_num }}</text>
              </view>
            </view>
            <view class="line mt-12 ml-102"></view>
          </view>

          <!-- test -->

          <!-- <view class="line mt-12 ml-102"></view> -->
          <view class="casess flex-center mt-20" @click="goReply(item.id)">
            <text class="ft c-bbq">{{ "更多回复" }}</text>
            <image class="wh-24 ml-12" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
          </view>
        </view>
        <view class="line mt-30" style="border-bottom: 2rpx solid #f1f1f1; width: 650rpx"></view>
      </view>
    </view>
  </view>
  <up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show" :title="title"
    :showCancelButton="true" :content="content"></up-modal>
  <up-popup :show="showReport" mode="bottom" :round="20" closeable="true" @close="showReport = false">
    <view class="reportBox pd-20">
      <view class="ft1 flex-center"> 举报</view>
      <view class="list mt-40 pd-20">
        <view class="ft c-33 fw-800">{{ "选择举报类型" }}</view>
        <view class="flex mt-20">
          <view :class="{ active: selectedIndexes.includes(index) }" @click="toggleSelection(item, index)"
            class="item pd-10 mr-20 ft c-66 flex-center" v-for="(item, index) in reportList" :key="index">{{ item }}
          </view>
        </view>
      </view>
      <view class="list mt-40 pd-20">
        <view class="ft c-33 fw-800">{{ "输入举报内容" }}</view>
        <view class="flex mt-20">
          <up-textarea v-model="reportValue" placeholder="请输入内容" count autoHeight></up-textarea>
        </view>
      </view>
    </view>

    <view class="btn auto mt-20 ft c-dbf flex-center" @click="subReport">
      提交
    </view>

  </up-popup>
  <!-- 回答 -->
  <comAnswerPop :show="showpop" @close="close" @onReplay="onReplay" :replysName="replysName"></comAnswerPop>
  <view class="bottomCard">
    <view class="comments flex" style="padding-left: 30rpx">
      <view class="input mt-12" style="padding-left: 8rpx" @tap="change">
        <!-- <up-input ref="inputRef" :placeholder="replysName" border="none" v-model="value1" @confirm="onReplay"
          @change="change"></up-input> -->
        <text>{{ replysName }}</text>

      </view>
      <view class="zan ml-40" @click="handleZan1(detailInfo.id, detailInfo.is_like, detailInfo)">
        <image v-if="detailInfo.is_like === 0" class="wh-32 mr-12"
          src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
        <image v-if="detailInfo.is_like === 1" class="wh-32 mr-12"
          src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
        <view class="ft">点赞</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onLoad } from "@dcloudio/uni-app";
const value = ref(4);
const value1 = ref("");

const replysId = ref(null)
const showReport = ref(false)
const replysName = ref('请输入回复内容')
const isMore = ref(false);
const detailInfo = ref({});
const product_info = ref({});
const user_info = ref({});

const show = ref(false);
const title = ref("清除评论");
const content = ref("确定要删除该条评论吗？");

const reportValue = ref('')
import comAnswerPop from "@/components/comAnswerPop.vue";


const selectedIndexes = ref([]);
const slectIdxVal = ref([])
function toggleSelection(item, index) {
  const indexOfIndex = selectedIndexes.value.indexOf(index);
  if (indexOfIndex > -1) {
    // 如果已经选中，撤销选中
    selectedIndexes.value.splice(indexOfIndex, 1);
    slectIdxVal.value.splice(indexOfIndex, 1);
  } else {
    // 如果没有选中，添加到选中列表
    selectedIndexes.value.push(index);
    slectIdxVal.value.push(item)

  }
}


//删除评论
const confirm = () => {
  show.value = false;
  utils
    .request(
      api.deleteReply,
      {
        id: deleteId.value
      },
      "post"
    )
    .then((res) => {
      getEvaluateDetailData(replysId.value)
    })
};
const cancel = () => {
  show.value = false;
};

const showRoport = (item) => {
  if (item.isMore) {
    item.isMore = false
  } else {
    item.isMore = true
  }

}
const reportId = ref(null);
const goReport = (id) => {
  showReport.value = true;
  reportId.value = id;
  getReportList()

};


const reportList = ref([])
const getReportList = () => {
  utils
    .request(
      api.getReportOptions,
      {

      },
      "post"
    )
    .then((res) => {
      reportList.value = res.data.options.type_list;
    })
}


const subReport = () => {

  utils
    .request(
      api.report
      ,
      {
        types: slectIdxVal.value,
        reply_id: reportId.value,
        content: reportValue.value

      },
      "post",
      "application/x-www-form-urlencoded;charset=utf-8"
    )
    .then((res) => {
      if (res.code == 200)
        utils.toast('感谢您的举报，举报结果稍后反馈给您！');
      showReport.value = false;
      selectedIndexes.value = [];
      slectIdxVal.value = [];
    })
}




const goReply = (id) => {
  uni.navigateTo({
    url: `/subpackage/search/reply?id=${id}`,
  });
};


const addIsMoreProperty = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    const obj = arr[i];
    // 给当前对象添加 isMore 属性
    obj.isMore = false;
    if (obj.children && Array.isArray(obj.children)) {
      // 如果有 children 数组，递归调用函数处理 children 数组
      addIsMoreProperty(obj.children);
    }
  }
  return arr;
}

const showpop = ref(false);
const change = () => {
  if (!utils.isLogin()) return utils.showLogModel()

  showpop.value = !showpop.value

}
// const placeholderText = ref('请文明用语~')
function close() {
  // 关闭逻辑，设置 show 为 false  
  showpop.value = false;
  replysName.value = '请输入回复内容~'
  parentId.value = 0

}
const parentId = ref(null)

//回复接口
const onReplay = (val) => {
  utils
    .request(
      api.commentReply,
      {
        content: val,
        parent_id: parentId.value,
        // evaluate_id:detailInfo.value.id,
      },
      "post"
    )
    .then((res) => {
      value1.value = '';
      getEvaluateDetailData(replysId.value)
      close()
    })

}



const deleteId = ref(null)
const isDelete = (id) => {
  show.value = true;
  deleteId.value = id
}
const flag = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
const handleZan = (id, islike, item) => {
  console.log('item', item)
  let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
  if (time < maxTime.value && zanCount.value > 10) {
    uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
    return flag.value = false
  } else if (time > maxTime.value) {
    zanTime.value = ''
    flag.value = true
    zanCount.value = 0
  }
  if (!flag.value) return
  flag.value = !flag.value
  zanCount.value++
  if (!zanTime.value) zanTime.value = Date.now()
  if (islike === 0) {
    utils
      .request(
        api.like,
        {
          reply_id: id,
        },
        "post"
      )
      .then((res) => {
        // getEvaluateDetailData(replysId.value)  
        item.is_like = 1
        item.like_num++
        flag.value = !flag.value
      })
  } else {
    utils
      .request(
        api.cancelLike,
        {
          reply_id: id,
        },
        "post"
      )
      .then((res) => {
        // getEvaluateDetailData(replysId.value)
        item.is_like = 0
        item.like_num--
        flag.value = !flag.value
      })
  }

}

const handleZan1 = (id, islike, item) => {
  let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
  if (time < maxTime.value && zanCount.value > 10) {
    uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
    return flag.value = false
  } else if (time > maxTime.value) {
    zanTime.value = ''
    flag.value = true
    zanCount.value = 0
  }
  if (!flag.value) return
  flag.value = !flag.value
  zanCount.value++
  if (!zanTime.value) zanTime.value = Date.now()
  if (islike === 0) {
    utils
      .request(
        api.like,
        {
          reply_id: id,
        },
        "post"
      )
      .then((res) => {
        // getEvaluateDetailData(replysId.value)
        item.is_like = 1
        item.like_num++
        flag.value = !flag.value
      })
  } else {
    utils
      .request(
        api.cancelLike,
        {
          reply_id: id,
        },
        "post"
      )
      .then((res) => {
        item.is_like = 0
        item.like_num--
        flag.value = !flag.value
        // getEvaluateDetailData(replysId.value)
      })
  }

}

const inputRef = ref(null);
const openInput = (name, id) => {
  if (!utils.isLogin()) return utils.showLogModel()

  replysName.value = `回复 ${name} 的评论`;
  parentId.value = id;
  showpop.value = !showpop.value
}

const getEvaluateDetailData = (id) => {
  utils
    .request(
      api.getReplyDetail,
      {
        id: id,
      },
      "get"
    )
    .then((res) => {
      detailInfo.value = res.data.info;
      parentId.value = detailInfo.value.id;
      product_info.value = res.data.info.product_info;
      user_info.value = res.data.info.user_info;
      if (detailInfo.value.replys && detailInfo.value.replys.length > 0) {
        addIsMoreProperty(detailInfo.value.replys)
      }
      console.log(detailInfo.value, "detailInfo.value>>>>>>>>>>>");
    });
};




onLoad((options) => {
  if (options.id) {
    replysId.value = options.id;
    getEvaluateDetailData(options.id);
  }
});

</script>


<style lang="scss" scoped>
.nameplate {
  width: 88rpx;
  height: 36rpx;
  background: #333333;
  border-radius: 8rpx;
  line-height: 36rpx;
  text-align: center;
}

.reportBox {
  // width: 60%;
  height: 800rpx;
  border-radius: 40rpx;
  background: #f8f8f8;

  .list {
    height: 230rpx;
    background: #fff;
    border-radius: 20rpx;

    .item {
      background: #fff5f3;
      border-radius: 20rpx;
    }

    .active {
      background: #333333;
      color: #dbf046;
    }
  }
}

.btn {
  width: 690rpx;
  height: 78rpx;
  background: #333333;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.positionBox {
  //border: #d51010 solid 2rpx;
  position: relative;

  .box {
    position: absolute;
    bottom: -42rpx;
    left: -40rpx;
    z-index: 22;
    width: 128rpx;
    // height: 128rpx;
    background: #fff;
    box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}

.card1 {
  width: 690rpx;
  height: 216rpx;
  background: #f8f8f8;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.asd {
  width: 690rpx;
  height: 108rpx;
  background: #f8f8f8;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.caseBox {
  width: 690rpx;
  // height: 1384rpx;
  background: #f8f8f8;
  border-radius: 40rpx 40rpx 40rpx 40rpx;

  .combination {
    width: 172rpx;
    height: 54rpx;
    background: #ffffff;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
  }

  .line {
    width: 446rpx;
    height: 0rpx;
    border-bottom: 2rpx solid #f1f1f1;
  }

  .nextCase {
    width: 562rpx;
    // height: 530rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .casess {
      width: 160rpx;
      height: 54rpx;
      background: #f8f8f8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
}

.bottomCard {
  position: fixed;
  z-index: 99;
  bottom: 0rpx;
  //   border: #dbf046 2rpx solid;
  width: 750rpx;
  height: 166rpx;
  background: #f8f8f8;
  box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

  .comments {
    width: 750rpx;
    height: 98rpx;
    background: #f8f8f8;
    box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

    .input {
      width: 588rpx;
      height: 78rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #333333;
      display: flex;
      align-items: center;
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style>
